<template>
<!-- 这个相当于body在页面中，有且仅有一个 div根元素-->
  <div id="app">
   <div class='mather'>我是妈妈
    <div class='daughter'>我是女儿</div>
    <div class='box'><span>我是{{name}}</span></div>
    <div class='box'>在小时候我妈说我的爱好是：{{hobby1[0]}}</div>
    <div class='box'>现在长大了我的爱好是：{{hobby[0]}}</div>
    <div>想吃我妈做的排骨，可太好吃了！眼泪不争气的从嘴角流了出来</div>
   </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      name:'郭俊情',
      age:18,
      hobby:['吃','喝','睡'],
      hobby1:['学习','考试','上课']
    }
  }
}
</script>

<style lang='less'>
#app{
  width: 500px;
  background-color: #ccc;
  .mather{
color:pink;
.daughter{
  color:aqua;
}
.box{
  color:red;
}
  }
}
</style>
